<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    {include file="/layout/scriptload"}
    <title>添加发送账号</title>
</head>
<body>
<div id="app">
    <el-container>
        <el-main>
            <el-tabs v-model="active_tab" @tab-click="handle_tab">
                <el-tab-pane label="分类添加" name="category">
                    <el-row>
                        <el-col :span="6" style="margin-right: 10px;">
                            <el-input v-model="keyword" placeholder="昵称丶原始ID">
                                <el-button @click="search()" slot="append" icon="el-icon-search"></el-button>
                            </el-input>
                        </el-col>
                        <el-col :span="15">
                            <el-select v-model="category" filterable placeholder="一级分类" @change="category_change">
                                <el-option v-for="item in categorys" :key="item.id" :label="item.categoryname"
                                           :value="item.id"></el-option>
                            </el-select>
                            <el-select v-model="category2" filterable placeholder="二级分类" @change="category2_change">
                                <el-option v-for="item in categorys2" :key="item.id" :label="item.categoryname"
                                           :value="item.id"></el-option>
                            </el-select>
                            <el-button @click="add_by_category()" type="primary">添加</el-button>
                        </el-col>
                        <el-col>
                            <el-table :data="table_data" border stripe style="margin-top: 10px;" v-loading="loading"
                                      @selection-change="selection_change">
                                <el-table-column type="selection" width="120" label="全选"></el-table-column>
                                <el-table-column prop="name" label="账号昵称" width="220"></el-table-column>
                                <el-table-column prop="ghid" label="原始id" width="220"></el-table-column>
                                <el-table-column prop="category" label="一级分类" width="180"></el-table-column>
                                <el-table-column prop="category2" label="二级分类" width="180"></el-table-column>
                            </el-table>
                            <div style="text-align: center; margin-top: 10px;">
                                <el-pagination background layout="total, sizes, prev, pager, next" :total="total"
                                               :page-sizes="[10, 15, 20, 50]" :page-size="pagesize"
                                               @size-change="size_change"
                                               @current-change="current_change"></el-pagination>
                            </div>
                        </el-col>
                    </el-row>
                </el-tab-pane>
                <el-tab-pane label="原始id添加" name="ghid">
                    <h3 style="margin: 20px 0;">请填写要绑定的微信公众号原始id</h3>
                    <el-input label="请填写要绑定的微信公众号原始id" type="textarea" :autosize="{ minRows: 4, maxRows: 20}"
                              placeholder="请输入内容" v-model="textarea"></el-input>
                    <label style="color: red; margin: 20px 0;">每个ID请用英文逗号(,)分隔</label>
                    <el-row>
                        <el-button @click="add_by_ghid()" type="primary">添加</el-button>
                    </el-row>
                </el-tab-pane>
            </el-tabs>
        </el-main>
    </el-container>
</div>
</body>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            msgid: {$msgid}, // 消息id
            msg_type: '{$msg_type}', // 消息类型
            pid: 0, // 分类父id
            keyword: '', // 搜索关键字
            category: '', // 一级分类id
            category2: '', // 二级分类id
            categorys: [], // 所有一级分类
            categorys2: [], // 属于一级分类的二级分类
            active_tab: 'category', // 当前tab标签
            table_data: [], // 表格数据
            total: 0, // 表格数据总数
            page: 1, // 当前页数
            pagesize: 20, // 每页最多展示
            ghids: [], // 选中状态
            textarea: '', // ghids 字符串
            loading: false,
        },
        methods: {
            // 搜索
            search() {
                this.category = '';
                this.category2 = '';
                this.get_list();
            },
            // tab切换
            handle_tab(tab) {
                if (tab.index == 0) {
                    this.category = '';
                    this.category2 = '';
                    this.keyword = '';
                    this.get_list();
                }
            },
            // 页码切换
            current_change(page) {
                this.page = page;
                this.get_list();
            },
            // 每页展示切换
            size_change(val) {
                this.pagesize = val;
                this.get_list();
            },
            // 一级分类选择
            category_change(val) {
                this.get_category(val);
                this.category = val;
                this.get_list();
            },
            // 二级分类选择
            category2_change(val) {
                this.category2 = val;
                this.get_list();
            },
            // 获取分类
            get_category(pid = this.pid) {
                var that = this;
                $.ajax({
                    type: 'post',
                    cache: false,
                    url: '{:url("customer/get_category")}',
                    data: {pid: pid},
                    success: function (res) {
                        if (pid) {
                            that.categorys2 = res;
                        } else {
                            that.categorys = res;
                        }
                    },
                    error: function () {
                        this.$message.error('发生系统错误,请与管理员联系！');
                    }
                })
            },
            // 处理多选
            selection_change(val) {
                arr = [];
                val.forEach(function (item) {
                    arr.push(item.ghid);
                });
                this.ghids = arr;
            },
            // 获取公众号数据
            get_list() {
                var that = this;
                that.loading = true;
                $.ajax({
                    type: 'post',
                    cache: false,
                    url: '{:url("customer/get_account_list_without_msg")}',
                    data: {
                        page: that.page,
                        pagesize: that.pagesize,
                        keyword: that.keyword,
                        category: that.category,
                        category2: that.category2,
                        msgid: that.msgid
                    },
                    success: function (res) {
                        if (res.code == 0) {
                            that.table_data = res.data.list;
                            that.total = res.data.total;
                        } else {
                            that.table_data = [];
                            that.total = 0;
                        }
                        that.loading = false;
                    },
                    error: function () {
                        that.loading = false;
                        this.$message.error('发生系统错误,请与管理员联系！');
                    }
                })
            },
            // 按分类绑定
            add_by_category() {
                if (this.ghids.length) {
                    if (this.msg_type == 'mini') {
                        _url = 'http://wechat.nanxuncn.cn:9501/admin/customer/add_acc_by_category_async';
                    } else {
                        _url = '{:url("customer/add_acc_by_category")}';
                    }
                    $.ajax({
                        type: 'post',
                        cache: false,
                        url: _url,
                        data: {ghids: this.ghids, msgid: this.msgid},
                        success: function (res) {
                            if (res) {
                                layerAlert('成功添加' + res + '个账号', function () {
                                    layerParentClose();
                                    parent.window.location.reload();
                                })
                            } else {
                                layerAlert('添加失败');
                            }
                        },
                        error: function () {
                            layerAlert('发生系统错误,请与管理员联系！');
                        }
                    });
                } else {
                    this.$message.error('至少选择一个账号');
                }
            },
            // 按原始id绑定
            add_by_ghid() {
                if (this.textarea) {
                    if (this.msg_type == 'mini') {
                        _url = 'http://wechat.nanxuncn.cn:9501/admin/customer/add_acc_list_async';
                    } else {
                        _url = '{:url("customer/add_acc_list")}';
                    }
                    $.ajax({
                        type: 'post',
                        cache: false,
                        url: _url,
                        data: {ghids: this.textarea, msgid: this.msgid},
                        success: function (res) {
                            if (res) {
                                layerAlert('成功添加' + res + '个账号', function () {
                                    layerParentClose();
                                    parent.window.location.reload();
                                })
                            } else {
                                layerAlert('添加失败');
                            }
                        },
                        error: function () {
                            layerAlert('发生系统错误,请与管理员联系！');
                        }
                    });
                } else {
                    this.$message.error('请填入原始id');
                }
            },
        }
    });
    vm.get_category();
    vm.get_list();
</script>
</html>